<template>
	<van-nav-bar left-text="返回" left-arrow @click-left="goback">
		<template #title>
			{{data.title}}
		</template>
	</van-nav-bar>
	<el-form>
		<el-form-item :label="i.label" v-for="i in data.task.details" :key="i.value" label-width="25%">
			<!-- 设备状态，故障类型 -->
			<el-select v-model="i.value" v-if="i.edible && i.label==='设备状态'"  :placeholder="i.label">
				<el-option label="工作中" value="工作中" />
				<el-option label="已故障" value="已故障" />
				<el-option label="维修中" value="已故障" />
			</el-select>

			<el-select v-model="i.value" v-else-if="i.edible && i.label==='故障类型'"  :placeholder="i.label">
				<el-option label="数据异常" value="数据异常" />
				<el-option label="设备磨损" value="设备磨损" />
				<el-option label="配件损坏" value="配件损坏" />
			</el-select>

			<el-select v-model="i.value" v-else-if="i.edible && i.label==='工单类型'"  :placeholder="i.label">
				<el-option label="检修工单" value="检修工单" />
				<el-option label="维修工单" value="维修工单" />
			</el-select>

			<el-input v-model="i.value" v-else-if="i.edible" autocomplete="off" />

			<div v-else >{{i.value}}</div>
		</el-form-item>
	</el-form>
	<div style="display: flex;flex-direction:row;justify-content:center;margin-top: 10px">
		<el-button type="primary"  style="width:140px;" size="large" @click="submit">提交</el-button>
	</div>

</template>

<script setup>
import {useRoute,useRouter} from "vue-router";
import {useStore} from "vuex"
import {onMounted,reactive,ref} from "vue";

import {getTaskNumber, login, saveTask} from "@/request/api";

const route = useRoute();
const router = useRouter();
const store = useStore();
function goback(){
	//console.log('goback')
	router.go(-1)
}
const data = ref({

		title:'',
		device:{},
		task:{
			type: '标题1',
			details: [
				{
					label: '工单号',
					value: '值1',
					span: 1,
					display: true,
					edible:false
				},
				{
					label: '工单名称',
					value: '值1',
					span: 1,
					display: false,
					edible:true
				},
				{
					label: '创建时间',
					value: '值5',
					span: 2,
					display: false,
					edible:false
				},
				{
					label: '发起人',
					value: '1000',
					span: 2,
					display: false,
					edible:false
				},
				{
					label: '设备名称',
					value: '值2',
					span: 1,
					display: true,
					edible:false
				},
				{
					label: '设备ID',
					value: '值3',
					span: 1,
					display: false,
					edible:false
				},
				{
					label: '设备位置',
					value: '值4',
					span: 2,
					display: false,
					edible:false
				},
				{
					label: '设备状态',
					value: '值5',
					span: 2,
					display: true,
					edible:true
				},
				{
					label: '故障类型',
					value: '值5',
					span: 2,
					display: true,
					edible:true
				},
				{
					label: '工单类型',
					value: '值5',
					span: 2,
					display: true,
					edible:true
				},
				{
					label: '维修建议',
					value: '值5',
					span: 2,
					display: false,
					edible:true
				},
				{
					label: '处理进度',
					value: '值5',
					span: 2,
					display: false,
					edible:false
				},
				{
					label: '处理人',
					value: '',
					span: 2,
					display: false,
					edible:false
				},
				{
					label: '工单状态',
					value: 1,
					span: 2,
					display: false,
					edible:false
				}
			]
		}

})

function submit(){

	//标题更改成工单名称
	data.value.task.type = data.value.task.details[1].value
	console.log(data.value.task)
	saveTask(data.value.task.details[0].value,JSON.stringify(data.value.task)).then((x)=>{
		if(x.code === 200){
			store.commit('getAllTask')
			router.push({name:'MineTasks'})
		}
	})



}


onMounted(()=>{
		// console.log(route.query)
		data.value.title = route.query.title

		let line,device
		//如果vuex里有已经筛选好的本设备数据
		if(store.state.currentPage.deviceData.length !== 0){
			console.log('vuex里有本设备的数据',store.state.currentPage.deviceData,store.state.currentPage.DeviceID,store.state.currentPage.DeviceName)
			device = [{'deviceID':store.state.currentPage.DeviceID,'name':store.state.currentPage.DeviceName,'data':store.state.currentPage.deviceData}]
		}
		//如果有本产线筛选好的所有设备数据
		else if(store.state.currentPage.devicesData.length !== 0){
			console.log('vuex里有本产线所有设备的数据',store.state.currentPage.devicesData)
			line = store.state.currentPage.devicesData
		}
		//如果都没有，那我们得从总数距离筛选出来本设备数据
		else{
			let allLine = store.state.productionLine
			// console.log('allLine: ',allLine)
			// console.log('currentPage: ',store.state.currentPage)
			line = allLine.filter((item)=>{
				if(item.id === store.state.currentPage.LineID){
					return true
				}
			})
			// console.log('line: ',line)
			device = line[0].devices.filter((i)=>{
				if(!store.state.currentPage.DeviceID){console.log('vuex空')}
				else{
					if(i.deviceID === store.state.currentPage.DeviceID){
						return true
					}
				}
			})
			// console.log('筛选后得到的数据',line,device)
		}
		if(device){
			// console.log('device',device[0])
			data.device = device
		}



		console.log(data.value.task)
		//4设备名称，5设备ID，6设备位置
		data.value.task.details[5].value = data.device[0].deviceID 				// 设备id
		data.value.task.details[4].value = data.device[0].name 						// 设备名称
		data.value.task.details[6].value = store.state.currentPage.LineID+" " + store.state.currentPage.LineName 		// 故障地址
		data.value.task.details[3].value = store.state.currentUser.ID 		// 发起人id


		//生成工单创建的时间
		var date = new Date()
		let time = date.getFullYear()+"-"+date.getMonth()+'-'+date.getDay()+" "+date.getHours()+':'+date.getUTCMinutes()+':'+date.getSeconds()
		data.value.task.details[2].value = time 				// 工单发起时间


		getTaskNumber().then((res)=>{
			data.value.task.details[0].value = res.data    // 工单编号：按照数据库里的工单总数加一
			console.log(res.data)
		})

		console.log(data.value.task)
		console.log(JSON.stringify(data.value.task))
		// saveTask(JSON.stringify({a:1,b:2}))

})

</script>

<style scoped>

</style>